<style scoped>
.fee-con {
    padding: 0 30px;
}

.fee-card {
    margin-bottom: 10px;
}

.fee-card-head {
    background-color: #e4eaec;
    line-height: 38px;
    border: 1px solid #ddd;
}
.fee-card-head h3{
    text-align: center;
    font-size: 16px;
}
.fee-card-title {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    padding-left: 20px;
}

.fee-card-headr {
    padding-right: 10px;
    text-align: right;
}

.fee-card-content {
    clear: both;
}

.fee-paramname {
    text-align: center;
    background-color: #e4eaec;
    font-size: 14px;
    color: #333;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-paramvalue {
    padding-left: 30px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
    white-space:nowrap;
    height: 40px;
}

.fee-card-contentrow {
    line-height: 40px;
    border-left: 1px solid #ddd;
    /* border-bottom: 1px solid #ddd; */
}
.feestyle{
    color: red;
}
.ivu-table td.feestyle{
         color: red;
}
</style>
<style>
.ivu-table td.feestyle{
         color: red;
}
</style>

<template>
    <div>
        <product-title></product-title>
        <div class="fee-con">
            <div class="card fee-card">
                <Row class="fee-card-head">
                    <Col span="24">
                        <h3>华保鑫诺保险销售有限公司  佣金发放明细表</h3>
                    </Col>
                </Row>
                <div class="fee-card-content">
                    <Row class="fee-card-contentrow">
                        <Col span="2" class="fee-paramname">年度</Col>
                        <Col span="4" class="fee-paramvalue">2017</Col>
                        <Col span="2" class="fee-paramname">月份</Col>
                        <Col span="4" class="fee-paramvalue">9</Col>
                        <Col span="2" class="fee-paramname">姓名</Col>
                        <Col span="4" class="fee-paramvalue">张三</Col>
                        <Col span="2" class="fee-paramname">身份证号</Col>
                        <Col span="4" class="fee-paramvalue">410************750</Col>                        
                    
                        <Col span="2" class="fee-paramname">销售代码</Col>
                        <Col span="4" class="fee-paramvalue">10001</Col>
                        <Col span="2" class="fee-paramname">实驻单位</Col>
                        <Col span="4" class="fee-paramvalue">华保鑫诺</Col>
                        <Col span="2" class="fee-paramname">营业部</Col>
                        <Col span="4" class="fee-paramvalue">华保鑫诺营业1部</Col>
                        <Col span="2" class="fee-paramname">级别</Col>
                        <Col span="4" class="fee-paramvalue">业务经理</Col>                        
                    
                        <Col span="2" class="fee-paramname">现职状况</Col>
                        <Col span="4" class="fee-paramvalue">在职</Col>
                        <Col span="2" class="fee-paramname">税后佣金</Col>
                        <Col span="4" class="fee-paramvalue">50194.03</Col>
                        <Col span="2" class="fee-paramname">缴纳增值税基数</Col>
                        <Col span="4" class="fee-paramvalue">58200</Col>
                        <Col span="2" class="fee-paramname">增值税</Col>
                        <Col span="4" class="fee-paramvalue">1695.15</Col>                        
                    
                        <Col span="2" class="fee-paramname">建税</Col>
                        <Col span="4" class="fee-paramvalue">118.66</Col>
                        <Col span="2" class="fee-paramname">教育费附加</Col>
                        <Col span="4" class="fee-paramvalue">50.85</Col>
                        <Col span="2" class="fee-paramname">实发金额</Col>
                        <Col span="4" class="fee-paramvalue">50194.03</Col>
                        <Col span="2" class="fee-paramname">地方教育费附加</Col>
                        <Col span="4" class="fee-paramvalue">33.90</Col>                        
                    
                        <Col span="2" class="fee-paramname">增值税等合计</Col>
                        <Col span="4" class="fee-paramvalue">1898.56</Col>
                        <Col span="2" class="fee-paramname">个税基数</Col>
                        <Col span="4" class="fee-paramvalue">33780.86</Col>
                        <Col span="2" class="fee-paramname">应税所得</Col>
                        <Col span="4" class="fee-paramvalue">27024.69</Col>
                        <Col span="2" class="fee-paramname">应交个人所得税</Col>
                        <Col span="4" class="fee-paramvalue">6107.41</Col>                        
                    </Row>
                </div>
            </div>
            <div class="card fee-card">
                <Row class="fee-card-head">
                    <Col span="24">
                        <h3>佣金明细</h3>
                    </Col>
                </Row>
                <div class="fee-card-content">
                    <Row class="fee-card-contentrow">
                        <Col span="2" class="fee-paramname">首佣</Col>
                        <Col span="4" class="fee-paramvalue">31500.00</Col>
                        <Col span="2" class="fee-paramname">续佣</Col>
                        <Col span="4" class="fee-paramvalue">15000</Col>
                        <Col span="2" class="fee-paramname">推荐资金</Col>
                        <Col span="4" class="fee-paramvalue">1000</Col>
                        <Col span="2" class="fee-paramname">应税激励方案兑现</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>                        
                    
                        <Col span="2" class="fee-paramname">综合开拓佣金</Col>
                        <Col span="4" class="fee-paramvalue">5000</Col>
                        <Col span="2" class="fee-paramname">首佣缓发</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>
                        <Col span="2" class="fee-paramname">续佣缓发</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>
                        <Col span="2" class="fee-paramname">管理津贴</Col>
                        <Col span="4" class="fee-paramvalue">5500</Col>                        
                    
                        <Col span="2" class="fee-paramname">续收督导津贴奖金</Col>
                        <Col span="4" class="fee-paramvalue">200</Col>
                        <Col span="2" class="fee-paramname">寿佣合计</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>
                        <Col span="2" class="fee-paramname">佣金合计</Col>
                        <Col span="4" class="fee-paramvalue">53200</Col>                                              
                    </Row>
                    
                </div>
            </div>
            <div class="card fee-card">
                <Row class="fee-card-head">
                    <Col span="24">
                        <h3>加扣税明细</h3>
                    </Col>
                </Row>
                <div class="fee-card-content">
                    <Row class="fee-card-contentrow">
                        <Col span="2" class="fee-paramname">税后已发</Col>
                        <Col span="4" class="fee-paramvalue">0.00（实物激励方案已兑现）</Col>
                        <Col span="2" class="fee-paramname">税后扣除</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>
                        <Col span="2" class="fee-paramname">申请补发</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>
                        <Col span="2" class="fee-paramname">保证金退款</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>                        
                    
                        <Col span="2" class="fee-paramname">需缓发</Col>
                        <Col span="4" class="fee-paramvalue">0.00</Col>                                              
                    </Row>
                    
                    
                </div>
            </div>
            <!-- <div class="card fee-card">
                <Row class="fee-card-head">
                    <Col span="24">
                        <h3>产品销售明细</h3>
                    </Col>
                </Row>
                <div class="fee-card-content">
                    <Table :columns="columns1" :data="data1"></Table>                                           
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
export default {
    data () {
        return {
            columns1: [
                    {
                        title: '销售代码',
                        key: 'id'
                    },
                    {
                        title: '保单号',
                        key: 'policy_id'
                    },
                    {
                        title: '险种',
                        key: 'pro'
                    },
                    {
                        title: '保单生效日',
                        key: 'date'
                    },
                    {
                        title: '保费',
                        key: 'rate'
                    },
                    {
                        title: '佣金',
                        key: 'fee',
                        className:'feestyle'
                    }
                ],
                data1: [
                    {
                        id: '10001',
                        policy_id: 3158072,
                        pro: '国华人寿华保安行意外两全保险',
                        date:"20170915",
                        rate:30000.00,
                        fee:24000.00,
                    },
                    {
                        id: '10001',
                        policy_id: 3158072,
                        pro: '国华人寿华保安行意外两全保险',
                        date:"20170915",
                        rate:30000.00,
                        fee:24000.00,
                    },
                    {
                        id: '10001',
                        policy_id: 3158072,
                        pro: '国华人寿华保安行意外两全保险',
                        date:"20170915",
                        rate:30000.00,
                        fee:24000.00,
                    },
                    {
                        id: '10001',
                        policy_id: 3158072,
                        pro: '国华人寿华保安行意外两全保险',
                        date:"20170915",
                        rate:30000.00,
                        fee:24000.00,
                    }
                ]
        }
    },
    components: {
        productTitle
    },
}
</script>
